<!--  -->
<template>
  <div class="reply conatainer">
    <div class="reply-item">
      <div class="basic-box flex-row" v-for="comment in tableData">
        <div class="item-left">
          <div class="avatar">
            <img :src="`${$upload_path}/${comment.avatar}`" alt="" />
          </div>
        </div>
        <div class="item-middle">
          <div class="line-1">
            <div class="username">{{ comment.nickName }}</div>
            <span class="desc-field">对商品<strong style="font-weight: bolder;margin: 0 5px;">{{ comment.goodsName }}</strong>发表了评价</span>
          </div>
          <div class="line-2"><span>{{ comment.content }}</span></div>
          <div class="line-3">
            <span class="time">{{ comment.publishTime }}</span>
            <span class="btn-box">
              <button class="action-btn">
                <i class="el-icon-chat-dot-round"></i>回复
              </button>
              <button class="action-btn">
                <i class="el-icon-star-off"></i>点赞
              </button>
              <button class="action-btn" @click="handleDeleteRow(comment.id)">
                <i class="el-icon-delete"></i>删除
              </button>
            </span>
          </div>
        </div>
        <div class="item-right">
          <img style="width: 65px;height: 65px;" :src="`${$upload_path}/${comment.goodsImg}`" alt="">
        </div>
      </div>
      <div class="reply-box flex-row">
        <div class="reply-left">
          <div class="avatar">
            <img src="/preferred/2301.jpg" alt="" />
          </div>
        </div>
        <div class="center-box">
          <textarea name="" id="" cols="30" rows="10"></textarea>
        </div>
        <div class="reply-right ">
          <button>发表<br>评论</button>
        </div>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { pageQuery, deleteData } from '@/api/comment'
import { getTableData, handleVoidMethod } from '@/api/table'
export default {
  data() {
    return {
      tableData: [],
      queryParams: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      currentPage: 1,
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.queryParams.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.queryParams.page = val
      this.getTableData()
    },
    getTableData() {
        getTableData(this, pageQuery(this.queryParams))
    },
    handleDeleteRow(id) {
      console.log(id)
      handleVoidMethod(this, '删除成功', '删除失败', deleteData([id]))
    },
  }
}
</script>

<style lang="less" scoped>
.basic-box  {
  padding-top: 10px;
  flex-wrap: wrap;
  box-sizing: border-box;
  border-bottom: var(--bg-secondary-color) solid 1px;
}
.reply-item {
  padding-bottom: 24px;
  .item-left {
    display: flex;
    margin-right: 15px;
    justify-content: center;
    .avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      overflow: hidden;
      background-color: aqua;
      img {
        width: 100%;
      }
    }
  }
  .item-middle {
    flex-grow: 1;
    .line-1 {
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 10px;
      .username {
        display: inline-block;
        font-weight: bolder;
        margin-right: 8px;
      }
    }
    .line-2 {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .line-3 {
      display: flex;
      flex-wrap: wrap;
      .time {
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        margin-right: 15px;
        margin-bottom: 10px;
      }
      .btn-box {
        margin-bottom: 10px;
      }
      .action-btn {
        height: 18px;
        line-height: 18px;
        cursor: pointer;
        margin-right: 14px;
        i {
          margin-right: 2px;
        }
      }
      button {
        outline: 0;
        padding: 0;
        margin: 0;
        border: 0;
        background-color: transparent;
        transition: var(--tran-01);
        color: var(--text-normal-color);
      }
    }
  }
  .reply-box {
    margin-top: 20px;
  }
  .reply-left {
    .avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      overflow: hidden;
      background-color: aqua;
      img {
        width: 100%;
      }
    }
  }
  .center-box {
    height: 65px;
    flex-grow: 1;
    margin: 0 15px;
    textarea {
      padding: 5px 10px;
      border-radius: 5px;
      border: none;
      background-color: var(--bg-secondary-color);
      width: 100%;
      height: 100%;
      resize: none;
      outline: none;
      box-sizing: border-box;
      transition: var(--tran-01);
      color: var(--text-normal-color);
    }
  }
  .reply-right {
    width: 70px;
    button {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 5px;
      background: var(--primary-color);
      color: var(--text-sidebar-hover-color);
      cursor: pointer;
    }
  }
}

.el-pagination {
  margin-top: 20px;
}

/deep/ .el-pagination button {
  background-color: var(--bg-primary-color);
  transition: var(--tran-01);
}
/deep/ .el-pager li {
  background-color: var(--bg-primary-color);
  transition: var(--tran-01);
}
/deep/ .el-pager li.active {
  color: var(--primary-color);
  background-color: var(--bg-primary-color);
  transition: var(--tran-01);
}
/deep/ .el-pagination__total {
  color: var(--text-normal-color);
  transition: var(--tran-01);
}
/deep/ .el-pagination__jump {
  color: var(--text-normal-color);
  transition: var(--tran-01);
}
</style>
